<!--
 * @Description: 头部
-->
<template>
  <el-header>
    <div class="left" @click="handleCollapse">
      <el-icon v-if="isCollapse"><Expand /></el-icon>
      <el-icon v-else><Fold /></el-icon>
      <span>管理系统</span>
    </div>
    <div class="right">
      <el-dropdown>
        <span class="el-dropdown-link">
          <span>欢迎{{ store.state.userInfo.username }}回来</span>
          <el-icon><UserFilled /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="toCenter">个人中心</el-dropdown-item>
            <el-dropdown-item @click="loginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup>
import { Expand, Fold, UserFilled } from '@element-plus/icons-vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { computed } from 'vue';

const store = useStore();
const router = useRouter();

const isCollapse = computed(() => !store.state.isCollapse);
const handleCollapse = () => {
  store.commit('changeCollapse');
};
const toCenter = () => {
  router.push('/center');
};
const loginOut = () => {
  localStorage.removeItem('token');
  store.commit('clearUerInfo');
  router.push('/login');
};
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-header {
  background-color: rgb(51, 136, 226);
  @include flex();
  justify-content: space-between;
  .left {
    @include flex();
    .el-icon {
      cursor: pointer;
    }
  }
  .right {
    .example-showcase .el-dropdown-link {
      cursor: pointer;
      @include flex();
    }
  }
}
</style>
